<template>
  <base-breadcrumb :title="$route.meta.title">
    <!-- 职工合理化建议编辑 -->
    <a-form-model
      ref="ruleForm"
      :model="form"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
      :rules="editModel != 0 ? rules : {}"
    >
      <a-spin :spinning="loading">
        <!-- 表格 -->
        <a-card :bordered="false">
          <title-name title="基本信息"></title-name>
          <custom-form :formList="formList" :form="form" editModel="V">
            <!-- 附件上传 -->
            <template #fileInfoVOS>
              <file-link :fileList="form.fileInfoVOS" style="margin-top: -3px"></file-link>
            </template>
          </custom-form>
        </a-card>
        <a-card :bordered="false">
          <title-name title="回复"></title-name>
          <a-form-model-item prop="replyOpinion" label="意见" class="requiredFormItem">
            <BaseTextarea v-if="editModel == 1" v-model="form.replyOpinion" placeholder="请输入意见" />
            <div v-else style="margin-top: -3px">
              {{ form.replyOpinion || '无' }}
            </div>
          </a-form-model-item>
          <a-form-model-item prop="replyFileInfoVOS" label="附件" class="requiredFormItem">
            <template v-if="editModel != 0">
              <l-table businessCode="UNION3" :uploadArrys.sync="form.replyFileInfoVOS"></l-table>
              <div class="file_prompt">支持扩展名：.rar .zip .doc .docx .pdf .jpg...</div>
            </template>
            <file-link v-else :fileList="form.replyFileInfoVOS" style="margin-top: -3px"></file-link>
          </a-form-model-item>
        </a-card>
      </a-spin>
      <!-- 页脚操作栏 -->
      <div class="btn_box page-btn-right-top">
        <a-button :loading="loading" v-if="editModel != 0" type="primary" class="button_right" @click="handleSubmit"
          >提交</a-button
        >
        <a-button type="primary" @click="handleActiveClose">关闭</a-button>
      </div>
    </a-form-model>
  </base-breadcrumb>
</template>

<script>
import { workersRationalizationSuggestions } from '@/api/union/workersCongress' // api
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置

export default {
    name:'a'+Date.now(),
  extends: new BaseEditPage(),
  data() {
    return {
      loading: false, // 草稿和提交按钮loding
      editModel: 0, // 操作状态:0 查看;1 编辑;2 新增
      form: {
        creator: '',
        createTime: '',
      }, // 表单
      rules: {
        replyOpinion: [{ required: true, whitespace: true, message: '请输入回复意见', trigger: 'change' }],
        replyFileInfoVOS: [{ type: 'array', required: true, message: '请上传附件', trigger: 'blur' }],
      }, // 校验规则
      init: false, // 初始化控件
      statusCode: '', // 审批状态
    }
  },
  watch: {
    // 监听附件实现附件校验
    'form.replyFileInfoVOS'() {
      if (this.editModel != 0 && this.init) {
        this.$nextTick(() => {
          this.$refs.ruleForm?.validateField('replyFileInfoVOS')
        })
      }
    },
  },
  mounted() {
    this.$route.meta.title = ['意见回复查看', '意见回复编辑'][this.editModel]
    // 不为添加时请求详情
    if (this.editModel != 2) {
      this.loading = true
      workersRationalizationSuggestions
        .getDetail({ id: this.id })
        .then((res) => {
          this.loading = false
          this.form = res.data
          this.$nextTick(() => {
            this.init = true
          })
        })
        .catch(() => {
          this.loading = false
        })
    }
  },
  computed: {
    formList() {
      return [
        {
          keyName: 'title',
          label: '主题',
        },
        {
          keyName: 'creator',
          label: '填报人',
        },
        {
          keyName: 'createTime',
          label: '填报时间',
        },
        {
          keyName: 'content',
          label: '主要内容',
          span: 24,
        },
        {
          slot: true,
          keyName: 'fileInfoVOS',
          label: '佐证材料',
          span: 24,
        },
      ]
    },
  },
  methods: {
    /**
     * 提交表单
     */
    handleSubmit() {
      let that = this
      let api = ['update', 'create'][that.editModel - 1] // 根据操作切换url地址
      // 校验表单
      that.$refs.ruleForm.validate((e) => {
        if (e) {
          // 提交表单
          let form = that.$clone(that.form)
          // 格式化文件列表
          if (form.replyFileInfoVOS.length > 0) {
            form.replyFileId = form.replyFileInfoVOS.map((item) => item.commonId).join()
          }
          that.loading = true
          workersRationalizationSuggestions[api](form)
            .then(() => {
              that.loading = false
              that.$message.success('提交成功！')
              that.$multiTab.close()
            })
            .catch(() => {
              that.loading = false
            })
        } else {
          this.$message.warning("请填写完所有必填项信息")
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.file_prompt {
  color: #999;
}
</style>
